﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="../../Scripts/jOrgChart/example/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../Scripts/jOrgChart/example/css/jquery.jOrgChart.css" />
    <link rel="stylesheet" href="../../Scripts/jOrgChart/example/css/custom.css" />
    <link href="../../Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../Scripts/jOrgChart/example/css/prettify.css" type="text/css" rel="stylesheet" />
    <link href="../../Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" />
    <script src="../../Scripts/jOrgChart/example/prettify.js"></script>



    <script src="../../Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="../../Content/JqueryEasyUI/jquery.easyui.min.js"></script>

    <script type="text/javascript">

        jQuery(document).ready(function() {
            loadtree();
        });
        //menu_list为json数据
        //parent为要组合成html的容器

        function showall(menu_list, parent) {
            for (var menu in menu_list) {
                //如果有子节点，则遍历该子节点
                if (menu_list[menu].children.length > 0) {
                    //创建一个子节点li
                    var li = $("<li></li>");
                    //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
                    $(li).append(" <a  href='javascript:void(0)'  onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);
                    //将空白的ul作为下一个递归遍历的父亲节点传入
                    showall(menu_list[menu].children, $(li).children().eq(1));
                }
                    //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
                else {
                    $("<li></li>").append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);
                }
            }
        }

        function loadtree() {
            $.ajax({
                url: '../Organization/GetList',

                type: 'POST',

                //data: { id: nodeId },

                cache: false,

                error: function() { alert('Error loading PHP document'); },

                success: function(result) {
                    // var json = eval("["+result+"]");//这里中间的括号为中括号 使数据类似[{"username":"张三","content":"沙发"}];的格式


                    var showlist = $("<ul id='org' style='display:none'></ul>");
                    showall(result, showlist);
                    $("#f").append(showlist);
                    $("#org").jOrgChart();
                }
            });

        }

        function xx(id) {
       
            
            $('#cc').combotree({
                url: '/Organization/GetCheakList',
                required: true
            });
            $.ajax({
                url: '../Organization/GetModle',

                type: 'POST',

                data: { id: id },

                cache: false,

                error: function() { alert('Error loading PHP document'); },

                success: function(result) {
                    $("#GroupId").val(result.GroupId);
                    $("#name").val(result.GroupName);
                    $('#cc').combotree('setValue', result.ParentGroupId);
                    $("#description").attr(result.GroupDescription);
                    //$("#subject").attr();
                }
            });
          

            $('#w').window('open');
        }

        function GetSelected(flage) {

            var t;
            var n;
            var name;
            var description;
            if (flage == 0) {

                t = $('#cc').combotree('tree'); // get the tree object
                n = t.tree('getSelected'); // get selected node
                name = $("#name").attr("value");
                description = $("#description").attr("value");
            } else {
                t = $('#cc2').combotree('tree'); // get the tree object
                n = t.tree('getSelected'); // get selected node
                name = $("#name2").attr("value");
                description = $("#description2").attr("value");
            }

            //alert(n.text);


            $.ajax({
                url: '../Organization/Addmodel',

                type: 'POST',

                data: { name: name, description: description, parentid: n.id, Flage: flage, GroupId: $("#GroupId").attr("value") },

                cache: false,

                error: function() { alert('Error loading PHP document'); },

                success: function(result) {
                    $.messager.alert('My Title', '成功', 'info');
                    $('#adddiv').window('close');
                    $('#w').window('close');
                    $('#f').empty();
                    $('.jOrgChart').remove();
                    claer();
                    loadtree();


                }
            });
        }
        function delSelected(flage) {
            
           var t = $('#cc2').combotree('tree'); // get the tree object
          var  n = t.tree('getSelected'); // get selected node
            $.ajax({
                url: '../Organization/Deletemodel',

                type: 'POST',

                data: { GroupId: n.id },

                cache: false,

                error: function () { alert('Error loading PHP document'); },

                success: function (result) {
                    $.messager.alert('My Title', '成功', 'info');
                
                    $('#del').window('close');
                    $('#f').empty();
                    $('.jOrgChart').remove();
                    claer();
                    loadtree();


                }
            });
        }
        
        function adddiv() {
            $('#adddiv').window('open');
            
            $('#cc2').combotree({
                url: '/Organization/GetCheakList',
                required: true
            });
            
        }
        function claer() {
            $("#GroupId").val('');
            $("#name").val('');
            $('#cc').combotree('setValue','');
            $("#description").attr('');
    
            $("#name2").val('');
            $('#cc2').combotree('setValue', '');
            $("#description2").attr('');
        }
    </script>
    <script src="../../Scripts/jOrgChart/example/jquery.jOrgChart.js"></script>

</head>

<body>

    <div style="padding: 5px; border: 1px solid #ddd">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="adddiv();">Add</a>
       <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="$('#del').window('open');">delte</a>
    </div>



    <div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width: 500px; height: 200px; padding: 10px;">
        <div style="padding: 10px 0 10px 60px">
            <input type="hidden" id="GroupId" />
            <form id="ff" method="post">
                <table>
                    <tr>
                        <td>名称:</td>
                        <td>
                            <input id="name" name="" class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>说明:</td>
                        <td>
                            <input id="description" class="easyui-validatebox" type="text" name="email" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>Subject:</td>
                        <td>
                            <select id="cc" class="easyui-combotree" data-options="url:'/Organization/GetCheakList',height:300" style="width: 200px;height:auto; "></select></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="修改" onclick="GetSelected(0);" />
                        </td>
                        <td>
                            <input type="button" value="关闭" onclick="$('#w').window('close');" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div id="adddiv" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width: 500px; height: 200px; padding: 10px;">
        <div style="padding: 10px 0 10px 60px">
            <input type="hidden" id="id" />
            <form id="ff2" method="post">
                <table>
                    <tr>
                        <td>名称:</td>
                        <td>
                            <input id="name2" name="" class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>说明:</td>
                        <td>
                            <input id="description2" class="easyui-validatebox" type="text" name="email" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>Subject:</td>
                        <td>
                            <select id="cc2"   style="width: 200px;"></select></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="添加" onclick="GetSelected(1);" />
                        </td>
                        <td>
                            <input type="button" value="关闭" onclick="$('#adddiv').window('close');" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    
    <div id="del" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width: 500px; height: 200px; padding: 10px;">
        <div style="padding: 10px 0 10px 60px">
            <input type="hidden" id="GroupId" />
            <form id="ff" method="post">
                <table>
                    
                    <tr>
                        <td>Subject:</td>
                        <td>
                            <select id="cc" class="easyui-combotree" data-options="url:'/Organization/GetCheakList',height:300" style="width: 200px;height:auto; "></select></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="删除" onclick="delSelected(0);" />
                        </td>
                        <td>
                            <input type="button" value="关闭" onclick="$('#del').window('close');" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div id="f"></div>


    @*    <ul id="org" style="display:none"><li>xxx1<ul><li>xxx2<ul><li>xxx6</li><li>xxx7</li></ul></li><li>xxx3<ul><li>xxx4<ul><li>xxx5</li></ul></li></ul></li></ul></li></ul>*@
</body>
</html>

